<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓扑图绘制</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div>
    <button>保存视图</button>
    <button>添加服务</button>
    <button>显示控制</button>
</div>
<div style="width: 80%;height: 80%;margin-top: 24px">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height: 100%;background-color: #F0F0F0"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid: {
            show: true,
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            zlevel: -1
        },
        xAxis: {
            show: true,
            min: 0,
            max: 1000,
            type: "value",
            interval: 20
        },
        yAxis: {
            show: true,
            min: 0,
            max: 1000,
            type: "value",
            interval: 20
        },
        graphic: [
            {
                type: "rect",
                left: 0,
                top: 0,
                shape: {
                    width: 190,
                    height: 90
                },
                draggable: true,
                style: {
                    fill: 'red',
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>